<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><meta content="telephone=no" name="format-detection">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>顶部导航条测试</title>
<!-- <script type="text/javascript">var nowUrl=window.location.href,scriptArr=$("script"),linkArr=$("link"),newTime=new Date().getTime();if(nowUrl.indexOf("t=")<0){if(nowUrl.indexOf("?")>-1){window.location.href=nowUrl+"&t="+newTime}else{window.location.href=nowUrl+"?t="+newTime}}for(var s=0;s<scriptArr.length;s++){if(scriptArr[s].src.indexOf("t=")<0){if(scriptArr[s].src.indexOf("?")>-1){$(scriptArr[s]).attr("src",scriptArr[s].src+"&t="+newTime)}else{$(scriptArr[s]).attr("src",scriptArr[s].src+"?t="+newTime)}}}for(var s=0;s<linkArr.length;s++){if(linkArr[s].href.indexOf("t=")<0){if(linkArr[s].href.indexOf("?")>-1){$(linkArr[s]).attr("href",linkArr[s].href+"&t="+newTime)}else{$(linkArr[s]).attr("href",linkArr[s].href+"?t="+newTime)}}};</script> -->
</head>
<body>
    <div class="topHead">
        <div class="log">固定头部标识</div>
        <div class="menu">
            <!-- 固定宽度活动菜单 -->
            <div>菜单1</div>
            <div>菜单2</div>
            <div>菜单3</div>
            <div>菜单4</div>
            <div>菜单5</div>
        </div>
        <div class="dis">固定基础信息</div>
    </div>
<style type="text/css">
    .topHead{
        width: 100%;
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        height: 50px;
        background-color: rgb(46, 46, 46);
        color: #fff;
        text-align: center;
        line-height: 50px;
        overflow: hidden;
    }
    .log{
        display: block;
        position: relative;
        width: 6em;
        padding: 0 1em;
    }
    .dis{
        display: block;
        position: relative;
        width: 6em;
        padding: 0 1em;
    }
    .menu{
        flex: 1;
        height: 67px;
        display: flex;
        position: relative;
         /*间距居中-或其他 flex-start=右对象_默认,flex-end=右对象,space-between=间距相等不保留两边边缘,space-around=则保留两边边缘,center=铺满*/
        justify-content:space-around;
        overflow: hidden;
        overflow-x: auto;
    }
    .menu > div {
        min-width: 5em;
        cursor:pointer;
        display: block;
        position: relative;
        z-index: 10;
    }

</style>
</body>
</html>